import React, { Component } from "react";
import "./style.scss";
import { Row, Col, Modal, List, Input } from "antd";

const data = [
    { id: 1, name: "指令1", content: "创建账户；修改密码；编辑内容；角色分配", type: "app" },
    { id: 2, name: "指令2", content: "创建账户；修改密码；编辑内容；角色分配", type: "user" },
    { id: 3, name: "指令3", content: "创建账户；修改密码；编辑内容；角色分配", type: "app" }
];

class OrderManagement extends Component {
    constructor(props) {
        super(props);
        this.state = {
            status: false,
            sourceData: []
        };
    }

    editOrderChange = order => {
        console.log(order);
        this.setState({
            status: true,
            sourceData: []
        });
    };

    getOrederRows = data => {
        const rows = [];
        data.forEach(element => {
            rows.push(
                <Row key={element.id} className="order-row" type="flex" justify="space-around" align="middle">
                    <Col span={4} className="order-col">
                        <i className="order-name" />
                        <span style={{ verticalAlign: "middle" }}>{element.type}</span>
                    </Col>
                    <Col span={16} className="order-col">
                        {element.content}
                    </Col>
                    <Col span={4} className="order-col edit" onClick={() => this.editOrderChange(element)}>
                        编辑
                    </Col>
                </Row>
            );
        });
        return rows;
    };

    editData = id => {
        const index = data.findIndex(item => item.id === id);
        if (index > -1) {
            data[index].edit = !data[index].edit;
        }
        this.setState({});
    };

    updateData = (evt, id) => {
        console.log(evt);
        const index = data.findIndex(item => item.id === id);
        if (index > -1) {
            data[index].name = evt.target.value;
        }
        this.setState({});
    };

    render() {
        const { status, sourceData } = this.state;

        return (
            <div className="order-content">
                <div className="order-title" />
                <Row className="order-title" type="flex" justify="space-around" align="middle">
                    <Col span={4} className="order-col">
                        指令对象
                    </Col>
                    <Col span={16} className="order-col">
                        指令内容
                    </Col>
                    <Col span={4} className="order-col">
                        操作
                    </Col>
                </Row>
                {this.getOrederRows(data)}
                <Modal
                    visible={status}
                    className="dayu-dialog"
                    title="编辑指令"
                    onCancel={() => this.setState({ status: false })}
                    onOk={() => console.log(12)}
                    cancelText="取消"
                    okText="新增指令"
                >
                    <div className="order-list">
                        <div className="item" />
                    </div>
                    <List
                        dataSource={data}
                        renderItem={item => (
                            <List.Item key={`item-${item.id}`}>
                                <Row style={{ width: "100%", height: 60, lineHeight: "60px" }}>
                                    <Col span={16}>
                                        {item.edit ? (
                                            <Input
                                                style={{ width: "80%" }}
                                                placeholder="input with clear icon"
                                                value={item.name}
                                                onChange={e => this.updateData(e, item.id)}
                                            />
                                        ) : (
                                            <span>{item.name}</span>
                                        )}
                                    </Col>
                                    <Col span={4} className="order-list-row-col" onClick={() => this.editData(item.id)}>
                                        <i className="order-edit" />
                                        <span style={{ verticalAlign: "middle" }}>{item.edit ? "保存" : "重命名"}</span>
                                    </Col>
                                    <Col span={4} className="order-list-row-col" onClick={() => console.log(item)}>
                                        <i className="delete" />
                                        <span style={{ verticalAlign: "middle" }}>删除</span>
                                    </Col>
                                </Row>
                            </List.Item>
                        )}
                    />
                    {sourceData.map(item => (
                        <div key={item}>name operation</div>
                    ))}
                </Modal>
            </div>
        );
    }
}

export default OrderManagement;
